<template>
	<div class="login">
		<div class="form-box">
			<div class="form-row">
				<i class="iconfont icon-shouji"></i>
				<input type="tel" v-model="formData.username" placeholder="手机号码" />
			</div>
			<div class="form-row">
				<i class="iconfont icon-Code"></i>
				<input type="password" v-model="formData.password" placeholder="登录密码" />
			</div>
			<div class="form-row">
				<i class="iconfont icon-Code"></i>
				<input type="tel" v-model="formData.code" maxlength="4" placeholder="验证码" />
				<img :src="codeImgUrl" @click="getCodeImg" />
			</div>
			<div class="form-btn">
				<button @click="login">登录</button>
				<div>
					<router-link :to="{path: '/forgot'}">
						<span>忘记密码？</span>
					</router-link>
					<router-link :to="{path: '/register'}">
						<span>注册新用户</span>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		name: 'login',
		data() {
			return {
				formData: {
					username: '',
					password: '',
					code: ''
				},
				codeImgUrl: sessionStorage.getItem('baseUrl') + '/verify.htm'
			}
		},
		methods: {
			getCodeImg() {
				this.codeImgUrl = sessionStorage.getItem('baseUrl') + '/verify.htm?timestamp=' + new Date().getTime();
			},
			login() {
				if(!this.formData.username) {
					Toast('手机号码不能为空')
					return;
				}
				if(!/^134[0-8]\d{7}$|^13[^4]\d{8}$|^14[5-9]\d{8}$|^15[^4]\d{8}$|^16[6]\d{8}$|^17[0-8]\d{8}$|^18[\d]{9}$|^19[8,9]\d{8}$/.test(this.formData.username)) {
					Toast('手机号码非法')
					return;
				}
				if(!this.formData.password) {
					Toast('登录密码不能为空')
					return;
				}
				if(!/^[0-9a-zA-Z]{6,}$/.test(this.formData.password)) {
					Toast('登录密码为6位以上数字或字母组合')
					return;
				}
				if(!this.formData.code) {
					Toast('验证码不能为空')
					return;
				}
				if(!/^[0-9]{4}$/.test(this.formData.code)) {
					Toast('验证码为4位数字组成')
					return;
				}
				this.$http.post('/shopping_login.htm', {
					login_role: 'user',
					shopping_view_type: 'wap',
					ajax_login: 'true',
					username: this.formData.username,
					password: this.formData.password,
					code: this.formData.code,
					is_redirect: 'n'
				}).then(res => {
					if(res.code == 0) {
						sessionStorage.setItem('loginInfo', res.cookieId);
						sessionStorage.setItem('userId', res.userId);
						sessionStorage.setItem('tabbarItem', 'cart');
						this.$router.replace("/index");
					}
				})
			}
		},
		created() {
			if(sessionStorage.getItem('loginInfo')) {
				sessionStorage.setItem('tabbarItem', 'cart');
				this.$router.replace("/index");
			}
			this.api.setHeader('登录');
		}
	}
</script>

<style lang="less">
	.login {
		background-image: url(http://img.hb.aicdn.com/084b20b3a05bf2c89f444ef2269d09d8b70e5ff380fb0-nFDWC4_fw658);
		height: 100%;
		text-align: center;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.form-box {
			width: 85%;
		}
		.form-row {
			margin-bottom: 0.2rem;
			padding: 0.2rem 3px;
			background-color: rgba(0, 0, 0, .4);
			display: flex;
			align-items: center;
			border-radius: 3px;
			position: relative;
			input {
				background-color: transparent;
				border: none;
				color: #fff;
				padding: 0.1rem 0;
				font-size: 0.28rem;
				flex: 1;
			}
			.iconfont {
				color: #FFFFFF;
				font-size: 0.32rem;
				margin-right: .2rem;
				margin-left: 0.2rem;
			}
			.pass {
				float: left;
				color: #fff;
			}
			.reg {
				float: right;
				color: #fff;
			}
		}
		.form-btn {
			div {
				display: flex;
				justify-content: space-between;
				padding-top: 0.2rem;
				a {
					color: #FFFFFF;
				}
			}
			button {
				display: block;
				background-color: #006CB5;
				border-radius: 1rem;
				padding: .1rem;
				text-align: center;
				margin: 0 auto;
				margin-top: .5rem;
				border: none;
				color: #fff;
				letter-spacing: .1rem;
				width: 100%;
				padding: 0.3rem 0;
				outline: none;
			}
		}
	}
</style>